import React, {Component} from 'react';
import {Result, List, WhiteSpace, Modal, Button} from 'antd-mobile'
import {connect} from 'react-redux'
import Cookies from 'js-cookie'
import {resetUser} from '../../redux/actions'

let Item = List.Item
let Brief = Item.Brief

class Personal extends Component {

    handleLayout = () => {
        Modal.alert("退出", '确认退出吗?', [
            {text: '取消'},
            {
                text: '确认',
                onPress: () => {
                    Cookies.remove('userid')
                    this.props.resetUser()
                }
            },

        ])
    }

    render() {
        let {header, username, company, post, info, salaty} = this.props.user
        return (
            <div>
                <Result img={<img src={require(`../../assets/images/${header}.png`)} alt={header} style={{width: 50}}/>}
                        title={username}
                        message={company}
                />
                <List renderHeader={() => "相关信息"}>
                    <Item multipleLine>
                        <Brief> 职位: {post}</Brief>
                        <Brief> 简介: {info}</Brief>
                        {salaty ? <Brief> 薪资: {salaty}</Brief> : null}
                    </Item>
                </List>
                <WhiteSpace/>
                <Button type='warning' onClick={this.handleLayout}> 退出登录 </Button>
            </div>
        );
    }
}

export default connect(
    state => ({user: state.user}),
    {resetUser}
)(Personal);